:root {
    --main-bg-color: hsl(0, 0%, 100%);
    --stream-bg-color: hsl(0, 0%, 85%);
    --shell-bg-color: hsl(0, 0%, 0%);
    --row-bg-color_hover: hsl(218, 67%, 95%);
    --table-header-bg-color: hsl(0, 0%, 95%);
    --controls-bg-color: hsla(0, 0%, 95%, 0.8);
    --control-buttons-bg-color: hsl(0, 0%, 95%);
    --text-color: hsl(0, 0%, 20%);
    --link-color: hsl(240, 100%, 47%);
    --link-color_visited: hsl(271, 68%, 32%);
    --svg-checkbox-bg-color: hsl(172, 100%, 37%);
    --svg-button-fill: hsl(199, 17%, 46%);
    --table-border-color: hsl(0, 0%, 82%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --main-bg-color: hsl(0, 0%, 14%);
        --stream-bg-color: hsl(0, 0%, 20%);
        --shell-bg-color: hsl(0, 0%, 0%);
        --row-bg-color_hover: hsl(218, 17%, 18%);
        --table-header-bg-color: hsl(0, 0%, 20%);
        --controls-bg-color: hsla(201, 18%, 19%, 0.8);
        --control-buttons-bg-color: hsl(201, 18%, 19%);
        --text-color: hsl(0, 0%, 90%);
        --link-color: hsl(210, 63%, 47%);
        --link-color_visited: hsl(267, 31%, 47%);
        --svg-checkbox-bg-color: hsl(172, 100%, 27%);
        --svg-button-fill: hsl(0, 0%, 100%);
        --table-border-color: hsl(0, 0%, 32%);
    }
}

a {
    color: var(--link-color);
}

a:visited {
    color: var(--link-color_visited);
}

body {
    color: var(--text-color);
    background-color: var(--main-bg-color);
    position: absolute;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body.shell {
    background-color: var(--shell-bg-color);
}

body.stream {
    background-color: var(--stream-bg-color);
}

.terminal-container {
    width: 100%;
    height: 100%;
    padding: 5px;
}

:focus {
    outline: none;
}

.wait {
    cursor: wait;
}

#controls {
    width: 100%;
    margin: 20px;
}


.table-wrapper {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
}

.table-wrapper table {
    border-spacing: 0;
    border-collapse: collapse;
    font-family: monospace;
}

.table-wrapper table thead {
    font-weight: bolder;
}

.table-wrapper table td, .table-wrapper table th {
    border-style: solid;
    border-width: 1px;
    border-color: var(--table-border-color);
}

.table-wrapper table tr:hover {
    background-color: var(--row-bg-color_hover)
}

.table-wrapper table th {
    position: sticky;
    top: -1px;
    background-color: var(--table-header-bg-color);
}

.decoder-controls-wrapper {
    padding: 5px;
}

.device-view {
    z-index: 1;
    float: right;
    display: inline-block;
}

.video-layer {
    position: absolute;
    z-index: 0;
}

.touch-layer {
    position: absolute;
    z-index: 1;
}

.video {
    float: right;
    max-height: 100%;
    max-width: 100%;
    background-color: #000000;
}

.spoiler > input ~ .box {
    display: none;
}

.spoiler > input:checked ~ .box {
    display: block;
}

.spoiler > label::before {
    content: '►';
    margin-right: 5px;
}

.spoiler > input:checked ~ label::before {
    content: '▼';
}

.spoiler > input:checked ~ div {
    display: block;
    padding: 10px;
}

.spoiler > input {
    display: none;
}

.more-box {
    display: none;
    position: absolute;
    background-color: var(--controls-bg-color);
    z-index: 2;
    padding: 0 10px 10px 10px;
}

.text-with-shadow, .more-box label {
    color: var(--text-color);
    text-shadow: var(--row-bg-color_hover) 0 0 5px;
}


.control-buttons-list {
    float: right;
    width: 52px;
    background-color: var(--control-buttons-bg-color);
}

.control-button {
    margin: 5px 11px;
    padding: 0;
    width: 30px;
    height: 30px;
    border: none;
    opacity: 0.75;
    background-color: var(--control-buttons-bg-color);
}

.control-button:hover {
    opacity: 1;
}

.control-buttons-list > input[type=checkbox] {
    display: none;
}

.control-buttons-list > label {
    display: inline-block;
}

.control-button > svg {
    fill: var(--svg-button-fill);
}

.control-buttons-list > input[type=checkbox]:checked + label > svg {
    fill: var(--svg-checkbox-bg-color);
}
